<template>
    <div class="change-message" @click="showGrade=false">
        <ul>
            <li>
                <mt-field label="账号 ：" :disabled="true" v-model="user.account"></mt-field>
            </li>
            <li>
                <mt-field label="姓名 ：" v-model="user.username" placeholder="不可为空,限长20个字符"></mt-field>
            </li>
            <li>
                <mt-field label="手机 ：" v-model="user.phone"></mt-field>
            </li>
            <li>
                <span class="l-lab">性别 ：</span>
                <mt-radio class="sex" v-model="user.sex" :options="[{label:'男',value:'0'},{label:'女',value:'1'}]">
                </mt-radio>
            </li>
            <li @click.stop="showGrade=!showGrade">
                <span class="l-lab">年级 ：</span>
                <span>{{gradeName}}</span>
            </li>
        </ul>
        <div class="btn">
            <div class="sure" @click="updateAuthUser">确认</div>
            <div class="cancle" @click="$router.go(-1)">取消</div>
        </div>
        <mt-picker v-if="showGrade" class="picker" valueKey="name" :slots="slots" @change="onValuesChange"></mt-picker>
    </div>
</template>
<script>
import storage from 'storage'
import io from 'api/io'
export default {
    data() {
        return {
            value: '',
            password: '',
            showGrade: false,
            slots: [
                {
                    flex: 1,
                    values: this.$root.grade,
                    className: 'slot1',
                    textAlign: 'center'
                }
            ],
            user: {},
            gradeName: ''
        }
    },
    created() {
        this.detailAuthUser()
    },
    mounted () {
    },
    methods: {
        async detailAuthUser() {
            let { data } = await io.post(io.detailAuthUser)
            if (data.success) {
                this.user = data.data
                this.user.sex += ''
                this.$root.grade.map((item, i) => {
                    if (item.id == this.user.section) {
                        this.gradeName = item.name
                    }
                })
            }
        },
        onValuesChange(picker, values) {
            console.log(values)
            this.gradeName = values[0].name
            this.user.section = values[0].id
        },
        async updateAuthUser() {
            if (!this.user.username) {
                Toast('姓名不可以为空')
                return
            }
            if (this.user.username && this.user.username.length > 20) {
                Toast('姓名字数小于20字')
                return
            }
            if (this.user.phone) {
                if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.user.phone))) {
                    Toast("请输入正确手机号码");
                    return
                }
            }
            if(this.user.section===undefined){
                Toast('请选择年级')
                return
            }
            let { data } = await io.post(io.updateAuthUser, this.user)
            if (data.success) {
                Toast('修改成功')
                    storage.setCurrentUserInfo(JSON.stringify(data.data))
                this.$router.go(-1)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.change-message
    background #f4fff4
    min-height 100%
    ul
        padding 0
        margin 0
        font-size 16px
        li
            list-style none
            height 55px
            background white
            display flex
            align-items center
            padding 0 20px
            &:nth-child(1),&:nth-child(2)
                border-bottom 1px solid #eeeeee
            &:nth-child(4)
                border-bottom 1px solid #eeeeee
                margin-top 10px
            .l-lab
                margin-right 5px
    .btn
        display flex
        padding 0 35px
        div
            flex 1
            height 40px
            display flex
            border-radius 21px
            justify-content center
            align-items center
            font-size 18px
            margin-top 30px
        .sure
            background-image linear-gradient(180deg, #99f164 0%, #77de6b 37%, #54cb72 74%, #4eb667 100%)
            color #fefefe
            height 42px
        .cancle
            border 1px solid #4bc66b
            margin-left 35px
            background white
    .picker
        position fixed
        bottom 0
        left 0
        width 100%
</style>
<style lang="stylus">
.sex
    display flex 
    align-items center
    .mint-cell
        float left
        min-height auto
    .mint-radio-input:checked + .mint-radio-core
        background-color #4ec972
        border-color #4ec972
    .mint-radiolist-title
        margin 0
    .mint-radiolist-label
        padding 0 10px 0 0
.change-message
    .mint-cell-wrapper
        padding 0
    .mint-field .mint-cell-title
        width auto
</style>

